{% extends "base.html" %}
{% block content %}

<table class="table table-striped">
    <br>
    <caption>
        <button type="submit" class="btn btn-primary Addusers">添加解析</button>
        <form class="form-inline pull-right" >

          <div class="form-group"    >
            <div class="input-group">
              <input    type="text" name="search_data"  class="form-control" >
            </div>
          </div>

          <button type="submit" class="btn btn-primary">搜索</button>
        </form>
    </caption>
    <thead>
        <tr>
        <th class="text-center">根域</th>
        <th class="text-center">二级域名</th>
        <th class="text-center">记录类型</th>
        <th class="text-center">记录值</th>
        <th class="text-center">TTL</th>
        <th class="text-center">操作</th>
        </tr>
    </thead>

    <tbody>
<tbody>
          {% for named_obj in object_list%}
        <tr class="gradeX">

                <td class="text-center"><a list_id='{{named_obj.id}}' >{{named_obj.zone}}</a></td>
                <td class="text-center">{{named_obj.host}}</td>
                <td class="text-center">{{named_obj.type}}</td>
                <td class="text-center">{{named_obj.data}}</td>
                <td class="text-center">{{named_obj.ttl}}</td>
                <td class="text-center">
			      <a type="button" class="btn btn-info btn-xs"  href="{% url 'named_detail'  named_obj.id %}" >修改</a>
                  <a type="button" class="btn btn-xs btn-danger del"  href="{% url 'named_detail'  named_obj.id %}" >删除</a>

                </td>
            </td>
         </tr>
         {% endfor %}
 </tbody>

    </tbody>
</table> <!-- 域名列表-->




<div>
  <center>
    <ul class="pagination">
           <li> <a href="{% url "named_list"  %}?page=1">首页 </a> </li>
           {% if  page_obj.has_previous %}
                    <li> <a href="{% url "named_list"  %}?page={{  page_obj.previous_page_number }}&{{ search_data }}"> 上一页 </a> </li>
            {% else %}
                    <li class="disabled"> <a> 上一页 </a> </li>
           {% endif %}

           {% for p in page_range %}
               {% if search_data  %}  <!-- 判断是否是搜索分页-->
                       {% if p == page_obj.number %}
                            <li class="active"><a href="{% url "named_list"  %}?page={{ p }}&{{ search_data }}"> {{ p }} </a> </li>
                        {% else %}
                            <li ><a href="{% url "named_list"  %}?page={{ p }}&{{ search_data }}"> {{ p }} </a> </li>
                        {% endif %}
                   {% else %}
                        {% if p == page_obj.number %}
                            <li class="active"><a href="{% url "named_list"  %}?page={{ p }}"> {{ p }} </a> </li>
                        {% else %}
                            <li ><a href="{% url "named_list"  %}?page={{ p }}"> {{ p }} </a> </li>
                        {% endif %}
               {% endif %}
           {% endfor %}


           {% if  page_obj.has_next %}
                    <li> <a href="{% url "named_list"  %}?page={{  page_obj.next_page_number }}&{{ search_data }}"> 下一页 </a> </li>
           {% endif %}
           <li> <a href="{% url "named_list"  %}?page={{ page_obj.paginator.num_pages }}">尾页 </a> </li>
           <li> <span style="color: #0a0a0a">总: &nbsp;{{ page_obj.paginator.num_pages }} 页 </span> </li>

    </ul>
  </center>
</div> <!--页码 -->




<!-- 往下都是模态框-->

<!--域名添加模态框-->
<div class="modal fade"  id ="AddZoneModal">   
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">域名解析添加</h4> 
      </div>
      <div class="modal-body">
        <p hidden id="uperrorMsg" class="text-danger" style="color:red"></p> <!-- for error msg-->
            <form id="addzoneForm" class="form-horizontal  nice-validator n-yellow" novalidate="novalidate">
            <div class="form-group">
                <label for="zone" class="col-sm-2 control-label">根域<span class="red-fonts">*</span></label>
                <div class="col-sm-8">
                    <input id="addzone" name="zone" placeholder="google.com" type="text" class="form-control"  datatype="s2-16" errormsg="域名格式不正确" >
                </div>
            </div><!--域-->
            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <label for="host" class="col-sm-2 control-label">二级域名<span class="red-fonts">*</span></label>
                <div class="col-sm-8">
                    <input id="addhost" name="host" placeholder="www" type="text" class="form-control" datatype="s1-16" errormsg="请填写主机记录">
                </div>
            </div><!--主机记录-->

            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <label for="type" class="col-sm-2 control-label">记录类型<span class="red-fonts">*</span></label>
                <div class="col-sm-8">
                    <input id="addtype" name="type"  value = "A" placeholder="A|CNAME" class="form-control" datatype="s1-10" errormsg="记录类型不合规">
                </div>
            </div><!--记录类型-->

            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <label for="data" class="col-sm-2 control-label">记录值<span class="red-fonts">*</span></label>
                <div class="col-sm-8">
                    <input id="adddata" name="data"   placeholder="0.0.0.0" class="form-control" datatype="s1-16" errormsg="记录值错误">
                </div>
            </div><!--记录值-->


            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <label for="ttl" class="col-sm-2 control-label">TTL<span class="red-fonts">*</span></label>
                <div class="col-sm-8">
                    <input id="addttl" name="ttl"   value="60" placeholder="" class="form-control" datatype="n1-11" errormsg="ttl值错误">
                </div>
            </div><!--TTSL-->

        <div class="form-group">
            <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="addzonebtn">确认</button>
            </div>
        </div> <!--button-->
        </form> <!--form-->
      </div> <!--modal-body-->

    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->




<!--更新模态窗-->
<div class="modal fade"  id ="updateModal">   
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">更新解析记录</h4> 
      </div>
      <div class="modal-body">
        <p hidden id="uperrorMsg" class="text-danger" style="color:red"></p> <!-- for error msg-->
            <form id="updateForm" class="form-horizontal nice-validator n-yellow" novalidate="novalidate">
            <input type="hidden" id='upid' name="id"><!--update need id-->
            <div class="form-group">
                <label for="zone" class="col-sm-2 control-label">根域<span class="red-fonts">*</span></label>
                <div class="col-sm-8">
                    <input id="zones" name="zone" placeholder="zone" type="text" class="form-control" readonly="">
                </div>
            </div><!--域-->
            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <label for="host" class="col-sm-2 control-label">二级域名<span class="red-fonts">*</span></label>
                <div class="col-sm-8">
                    <input id="host" name="host" placeholder="host" type="text" class="form-control">
                </div>
            </div><!--主机记录-->
            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <label for="type" class="col-sm-2 control-label">记录类型<span class="red-fonts">*</span></label>
                <div class="col-sm-8">
                    <input id="type" name="type" placeholder="type" class="form-control">
                </div>
            </div><!--记录类型-->
            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <label for="data" class="col-sm-2 control-label">记录值<span class="red-fonts">*</span></label>
                <div class="col-sm-8">
                    <input id="data" name="data"   placeholder="data" class="form-control">
                </div>
            </div><!--记录值-->
           

            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <label for="ttl" class="col-sm-2 control-label">TTL<span class="red-fonts">*</span></label>
                <div class="col-sm-8">
                    <input id="ttl" name="ttl"   placeholder="TTL" class="form-control">
                </div>
            </div><!--TTL-->
           
            

        <div class="form-group">
            <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="updatebtn">确认</button>
            </div>
        </div> <!--button-->
        </form> <!--form-->
      </div> <!--modal-body-->

    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->



<!--解析记录详情模态窗-->
<div class="modal fade" id='infoModel'>
  <div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
	    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	     <h4 class="modal-title">详情</h4>
    </div><!--header-->
    <div class="modal-body">
        <div class="form-group">
            <label class="control-label">根域</label>
             <div class="controls">
                        <span id="detail_zone" ></span>
            </div>
        </div> <!--detail detail_name_cn    end-->
		
        <div class="form-group">
            <label class="control-label">二级域名</label>
             <div class="controls">
                        <span id="detail_host" ></span>
            </div>
        </div> <!--detail detail_mobile end-->
        <div class="form-group">
            <label class="control-label">记录类型</label>
             <div class="controls">
                        <span id="detail_type" ></span>
            </div>
			
        </div> <!--detail desc end-->
        <div class="form-group">
            <label class="control-label">记录值</label>
             <div class="controls">
                        <span id="detail_data"></span>
            </div>
        </div> <!--detail deal desc end-->

		
    </div><!--body-->
    <div class="modal-footer">
      	<button type="button" class="btn btn-default update-cancel" data-dismiss="modal">关闭</button>
   </div><!--footer-->

    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->





{% endblock%}

{% block js %}
//表单验证
    $(function(){
       $(".Addusers").Validform({
               tiptype:3
        });
    })


// 添加域名解析模态框
    $(".Addusers").on('click',function(){
        $('#AddZoneModal').modal('show')
    })

//添加域名解析
$(function () {
        $("#addzonebtn").click(function () {
            var data = $("#addzoneForm").serialize()
            console.log(data)

            $.ajax({
                  url: "{% url "named_list"%}",
                  type: "post",
                  data: data,
                  success: function(res){
                     if (res.code == 0) {
                         swal("Success", "操作成功", "success");
                      location.reload()
                         }else{
                        console.log("操作失败",res.errmsg)
                         }
                     },
                beforeSend: function (xhr, settings) {
                    var csrftoken = getCookie('csrftoken');
                        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                            xhr.setRequestHeader("X-CSRFToken", csrftoken)
                              }
                          }
              })

        })
    })





{% endblock %}

